<!-- 主页面 -->
<template>
  <el-container class="box">
    <el-header class="header">
      <el-row type="flex" align="middle" class="aaa">
        <el-col :span="8"><div class="grid-content bg-purple">黑马程序员</div></el-col>
        <el-col :span="14"><div class="grid-content bg-purple-light">电商后台管理系统</div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple"><a href="javascript:;" @click="esc">退出</a></div></el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px" class="aside">
        <el-menu
          class="el-menu-vertical-demo"
          router
          unique-opened
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
              <el-menu-item index="user">用户列表</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>权限管理</span>
            </template>
              <el-menu-item index="juese">角色列表</el-menu-item>
              <el-menu-item index="power">权限列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>商品管理</span>
            </template>
              <el-menu-item index="goodHome">商品列表</el-menu-item>
              <el-menu-item index="classify">分类参数</el-menu-item>
               <el-menu-item index="goodclassify">商品分类</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>订单管理</span>
            </template>
              <el-menu-item index="order">订单列表</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>数据统计</span>
            </template>
              <el-menu-item index="1-1">选项1</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>


      <!-- 右边 -->
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
</el-container>

</template>

<script>
export default {
  name:"Home",
  beforecreated () {
       //判断页面是否是有login页面中登录进来的
       if(!localStorage.getItem("token")){
           alert("请先登录 , 1秒返回")
           setTimeout(() => {
              this.$router.push("/")
           }, 1000);
       }
      //  登录成功后 清除localstorage中的token值
       localStorage.clear()
  },
  methods: {
      esc(){
           //返回登录页面  
          this.$router.go(-2)
      }
  }
}

</script>
<style  scoped>
  .box{
    height: 100%;
  }
  .header{
     width: 100%;
     background: red;
  }
  .aside{
    height: 100%;
  }
  .aaa{
    line-height: 60px;
  }
  .main{
    background:aquamarine;
    height: 100%;
  }
</style>